<template>
    <div>
        <div style="display: flex;">
            <div style="margin: 0 30px;">
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
        </div>
        <div>
            <el-select v-model="wd_id" placeholder="请选择"  @change="selectType">
                <el-option v-for="(item, index) in typeList" :key="index" :label="item.type" :value="item.id">
                </el-option>
            </el-select>
        </div>
        </div>

        <div class="addBtn">
            <el-dialog title="新增" :visible.sync="dialogAdd">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="会员卡名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="金额" prop="money">
                        <el-input v-model="ruleForm.money"></el-input>
                    </el-form-item>
                    <el-form-item label="时间" prop="effective_time">
                        <el-input v-model="ruleForm.effective_time"></el-input>
                    </el-form-item>
                    <el-form-item label="所属类别">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">AI寻胆会员卡</el-radio>
                            <el-radio :label="2">爆冷预警会员卡</el-radio>
                            <el-radio :label="4">比分概率卡</el-radio>
                            <el-radio :label="5">Over大小球卡</el-radio>
                            <el-radio :label="3">组合卡</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDeleteAdd">取消</el-button>
                    <el-button type="primary" @click="clickConfirmAdd">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="addBtn">
            <el-dialog title="修改" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="会员卡名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="金额" prop="money">
                        <el-input v-model="ruleForm.money"></el-input>
                    </el-form-item>
                    <el-form-item label="时间" prop="effective_time">
                        <el-input v-model="ruleForm.effective_time"></el-input>
                    </el-form-item>
                    <el-form-item label="所属类别">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :label="1">AI寻胆会员卡</el-radio>
                            <el-radio :label="2">爆冷预警会员卡</el-radio>
                            <el-radio :label="3">组合卡</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="name" label="会员卡名称" align="center">
            </el-table-column>
            <el-table-column prop="effective_time" label="几个月" align="center">
            </el-table-column>
            <el-table-column prop="update_time" label="更新时间" align="center">
            </el-table-column>
            <el-table-column prop="money" label="金额" align="center">
            </el-table-column>
            <!-- <el-table-column label="时间" prop="effective_time" align="center">
                
            </el-table-column> -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div style="margin-top: 10px;">
                        <el-button type="primary" icon="el-icon-edit" circle @click="modifyVip(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteVip(scope.row)"></el-button>
                        <el-button type="warning"   circle @click="giftsVip(scope.row)">
                            赠
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { VueQuillEditor } from 'vue-quill-editor';
import { vipCardList, vipCardDelete, vipCardModify,vipUserList,sendVipUserList,aiVIPcardList,modifyVIP,vipDelete,sendGiftCard } from '../../../libs/api'
export default {
    data() {
        return {
            typeList:[{type:'AI寻胆',id:1},{type:'爆冷预警',id:2},{type:'组合会员卡',id:3},{type:'Over大小球',id:4},{type:'比分概率',id:5},{type:'寻胆加大小球',id:6},{type:'冷门加比分',id:7}],
            wd_id:1,
            dialogManagementVisible: false,
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            ruleForm: {},
            options: [{
                value: '选项1',
                label: '上架'
            }, {
                value: '选项2',
                label: '不上架'
            }],
            platformList: [{
                values: '选项1',
                label: 'H5'
            }, {
                values: '选项2',
                label: 'APP'
            }, {
                values: '选项3',
                label: '小程序'
            }],
            values: '',
            value: '',
            input: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            dialogTableVisible: false,
            dialogVisible: false,
            managementData: [],
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList:[],
            pageSizes: [5, 10],
            typeStatus:'',
            vipLx:'',
            totalCount: 1,
            vipCardId:'',
            dialogAdd:false
        }
    },
    created() {
        this.getVipCardList()
    },
    methods: {
        giftsVip(e){
            console.log(e)
            this.$prompt('请输入手机号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
        //   this.$message({
        //     type: 'success',
        //     message: '赠送的手机号是: ' + value
        //   });
        sendGiftCard({
            mobile: value,
            id:e.id
            }).then(res => {
                console.log(res)
                if(res.code==1){
                    this.$message({
                        type: 'info',
                        message: res.msg
                    });
                }
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
        },
        selectType(e){
            this.wd_id = e
            this.getVipCardList()
            // this.ruleForm.typeid = e
            // console.log(this.wd_id)
            // this.getAIlist()
        },
        // 显示第几页
    handleCurrentChange(val) {
        console.log(this.vipCardId)
      // 改变默认的页数
      this.currentPage = val
      this.getVipUserList()
    },
     // 分页
    // 每页显示的条数
    handleSizeChange(val) {

      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1

      this.getVipUserList()
    },
    getVipUserList(){
        vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx:this.vipLx,
                is_dq:this.typeStatus,
                id:this.vipCardId
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
    },
        // 获取会员卡列表
        getVipCardList() {
            aiVIPcardList({
                type:this.wd_id
                // page: this.currentPage,
                // limit: this.PageSize
            }).then(res => {
                console.log(res)
                this.tableData = res.data
            })
        },
        // 删除会员卡
        deleteVip(row) {
            console.log(row)
            this.$confirm('此操作将永久删除该会员卡, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            vipDelete({
                id: row.id
            }).then(res => {
                console.log(res)
                this.getVipCardList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        },
        clickDeleteAdd(){
            this.dialogAdd = false
        },
        modifyVip(row) {
            console.log(row)
            this.ruleForm = row
            this.dialogTableVisible = true
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            console.log(file);
        },
        handleButtonAdd() {
            this.dialogAdd = true
            // this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        clickConfirm() {
            modifyVIP({
                id: this.ruleForm.id,
                effective_time: this.ruleForm.effective_time,
                money: this.ruleForm.money,
                name: this.ruleForm.name,
                type:this.ruleForm.type
            }).then(res => {
                Object.assign(this.ruleForm,{
                    effective_time:'',
                    money:'',
                    type:'',
                    name:''
                })
                this.getVipCardList()
            })
            this.dialogTableVisible = false
        },
        clickConfirmAdd(){
            modifyVIP({
                effective_time: this.ruleForm.effective_time,
                money: this.ruleForm.money,
                name: this.ruleForm.name,
                type:this.ruleForm.type
            }).then(res => {
                Object.assign(this.ruleForm,{
                    effective_time:'',
                    money:'',
                    type:'',
                    name:''
                })
                this.getVipCardList()
            })
            this.dialogAdd = false
        },
        handleButton1Click(id,e) {
            console.log(id)
            this.typeStatus = e
            this.vipLx=id.lx_day
            this.vipCardId = id.id
            vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx:id.lx_day,
                is_dq:e,
                id:id.id
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
            this.dialogManagementVisible = true
        },
        handleButtonDelete(e){

        },
        handleAvatarSuccess(res, file,fileList) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res)
        console.log(URL.createObjectURL(file.raw))
        this.fileList = fileList
        this.ruleForm.img_url = res.data.url
        // this.ruleForm.img_url = URL.createObjectURL(file.raw)
      },
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}
.ql-editor {

height: 300px;

}
</style>
